<!DOCTYPE html>
<html lang="zh">

<head>
  <link rel="icon" href="data:;">
  <title>Cesium Wind3D Local</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    #cesiumContainer {
      width: 100vw;
      height: 100vh;
    }

    .myPanel {
      position: absolute;
      top: 5px;
      left: 5px;
    }
  </style>
  <link href="./libs/Cesium/Widgets/widgets.css" rel="stylesheet">

  <script src="./libs/Cesium/Cesium.js"></script>
  <script src="./libs/netcdfjs.min.js"></script>
</head>

<body>
  <div id="cesiumContainer"></div>

  <script type="module">
    import Wind3D from "./js/wind3d.esm.js"
    import Panel from "./js/panel.esm.js"
    import { minmax } from "./js/util.esm.js"

    const thematicResp = await fetch('./data/wd.json')
    const triangleDataResp = await fetch('./data/triangleData.json')
    const thematicData = await thematicResp.json()
    const triangleData = await triangleDataResp.json()

    //#region /* 获取并处理数据 */
    const response = await fetch('./data/test.json')
    const particleOriginData = await response.json()
    const length = particleOriginData.length
    const particleData = {
      dimensions: {
        lon: 720,
        lat: 361,
        lev: 1
      },
      lon: {},
      lat: {},
      lev: {},
      u: {},
      v: {},
      ldmaxLength: length
    }

    particleData.lon.array = new Float32Array(length)
    particleData.lat.array = new Float32Array(length)
    particleData.u.array = new Float32Array(720 * 361).fill(0.1)
    particleData.v.array = new Float32Array(720 * 361).fill(0.1)
    particleData.lev.array = new Float32Array([1])
    const longitudeArray = particleData.lon.array
    const latitudeArray = particleData.lat.array
    const uArray = particleData.u.array
    const vArray = particleData.v.array
    for (let i = 0; i < length; ++i) {
      longitudeArray[i] = +particleOriginData[i]["Longitude"]
      latitudeArray[i] = +particleOriginData[i]["Latitude"]
      uArray[i] = +particleOriginData[i]["eastward"]
      vArray[i] = +particleOriginData[i]["northward"]
    }
    particleData.lon.min = minmax(particleData.lon.array, false)
    particleData.lon.max = minmax(particleData.lon.array, true)
    particleData.lat.min = minmax(particleData.lat.array, false)
    particleData.lat.max = minmax(particleData.lat.array, true)
    particleData.lev.min = minmax(particleData.lev.array, false)
    particleData.lev.max = minmax(particleData.lev.array, true)
    particleData.u.min = -1;
    particleData.u.max = 1;
    particleData.v.min = -1;
    particleData.v.max = 1;
    //#endregion /* 数据创建完毕 */

    const viewer = new Cesium.Viewer('cesiumContainer', {
      baseLayerPicker: false,
      geocoder: false,
      infoBox: false,
      fullscreenElement: 'cesiumContainer',
      scene3DOnly: true,
      timeline: false,
      animation: false,
      fullscreenButton: false,
      homeButton: false,
      navigationHelpButton: false,
      imageryProvider: new Cesium.BingMapsImageryProvider({
        url: 'https://dev.virtualearth.net',
        key: 'AtkX3zhnRe5fyGuLU30uZw8r3sxdBDnpQly7KfFTCB2rGlDgXBG3yr-qEiQEicEc',
        mapStyle: Cesium.BingMapsStyle.AERIAL
      })
    });
    const panel = new Panel({
      ldmaxLength: particleData.ldmaxLength
    })
    const wind3d = new Wind3D(viewer, panel, {
      thematicData,
      triangleData,
      particleData
    });
  </script>
</body>

</html>